Documentation Center

Step 5: Replacing hard-coded field contents with code

To replace the hard-coded field contents with code that dynamically retrieves the fields' contents from the Component being rendered, replace the contents with code.

Procedure

  1. In Content Manager Explorer, navigate to the Folder Building Blocks\System\Templates\Template Building Blocks\Design\ and open the Template Building Block called "Article Summary Design" in this location.
  2. In the dialog that opens, select the Source tab.
  3. Replace the contents of the Source tab with the following:
    <article class="wrap wide" xmlns:tridion="http://www.tridion.com/ContentManager/5.0">
    
      @@FieldStartMarker("Component.Fields.image")@@
        @@FieldValueStartMarker(0)@@
          <img src="${Component.Fields.image}" tridion:type="Multimedia" alt="image" />
        @@FieldValueEndMarker()@@
      @@FieldEndMarker()@@
    
      <h2 class="title">
        @@FieldStartMarker("Component.Fields.title")@@
          @@FieldValueStartMarker(0)@@
            @@GetFieldValue("title", 0)@@
          @@FieldValueEndMarker()@@
        @@FieldEndMarker()@@
      </h2>
      <p class="info">Posted by @@FieldStartMarker("Component.Fields.author")@@
        @@FieldValueStartMarker(0)@@
          @@GetFieldValue("author", 0)@@
        @@FieldValueEndMarker()@@ 
      @@FieldEndMarker()@@ - @@FieldStartMarker("Component.Fields.date")@@
        @@FieldValueStartMarker(0)@@
          @@GetFieldValue("date", 0)@@
        @@FieldValueEndMarker()@@
      @@FieldEndMarker()@@</p>
      <p>
        @@FieldStartMarker("Component.fields.summary")@@
          @@FieldValueStartMarker(0)@@
            @@GetFieldValue("summary", 0)@@
          @@FieldValueEndMarker()@@
        @@FieldEndMarker()@@
      </p>
      <p class="more"><a tridion:href="@@Component.ID@@" tridion:textonfail="false">Read more &raquo;</a></p>
    </article>

    This code renders each of the fields of the Component it is rendering except for Body. This is because this Template Building Block is intended to render a summary only of the article.

  4. Save and close your Template Building Block.